<template>
  <div>
    <img-text-btn-view v-if="!userInfo"
      :icon-left="true"
      text="登录"
      sid="topMineBtnSid"
      :focusable="focusable"
      style="width: 200px;height: 60px;margin-left: 10px;margin-right: 10px;"
      :textStyle="{ width: '120px', height: '60px', color: '#BFBFBF', focusColor: '#0E0E0E' }"
      name="top_my_btn"
      ref="top_my_btn"
      :icon="ic_header_login_normal"
      :focus-icon="ic_header_login_focused"
      @click="loginClick" />
    <img-text-btn-view v-else
         :icon-left="true"
         :clipChildren="false"
         :focusable="focusable"
         style="width: 200px;height: 60px;margin-left: 10px;margin-right: 10px;"
         :textStyle="{ width: '120px', height: '60px', color: '#BFBFBF', focusColor: '#0E0E0E' }"
         @click="logoutClick"
         :icon="userInfoObj.headImage"
         :focus-icon="userInfoObj.headImage"
         :text="userInfoObj.nickname"
    >
    </img-text-btn-view>

  </div>
</template>

<script>
import {useESEventBus, useESLocalStorage} from "@extscreen/es3-core";

const {defineComponent} = require("@vue/runtime-core");
const {useESRouter} = require("@extscreen/es3-router");
const {__CONFIG__} = require("./config/global");
import {ref,computed,watch} from 'vue'
import EsRow from "../components/container/EsRow";
import ImgTextBtnView from "../components/img-text-btn-view.vue";
import ic_header_login_normal from "../assets/ic_header_login_normal.png"
import ic_header_login_focused from "../assets/ic_header_login_focused.png"
export default defineComponent({
  name: "LoginStatusView",
  components: {
    EsRow,
    ImgTextBtnView},
  props: {
    focusable:Boolean,
    default:false
  },
  //登录页面的状态
  setup(props,{emit}){
    const router = useESRouter()
    var esEventBus = useESEventBus();
    var esLocalStorage = useESLocalStorage();
    const userInfo=ref('')
    let userInfoObj=computed({
      get:()=>{
        if (validUserInfo(userInfo.value)){
          return JSON.parse(userInfo.value)
        }
      }
    })
    esLocalStorage.getString(__CONFIG__.userInfoKey).then(res=>{
      if (validUserInfo(res)){
        userInfo.value=res
        __CONFIG__.userInfoObj=JSON.parse(userInfo.value)
        emit('init')
      }
    })
    const loginClick=()=>{
      router.push('login_view')
      esEventBus.on(__CONFIG__.userInfoKey,(res)=>{
        if (validUserInfo(res)){
          userInfo.value=res
          __CONFIG__.userInfoObj=JSON.parse(userInfo.value)
        }
      })
    }
    const logoutClick=()=>{
      router.push('logout_view')
      esEventBus.on(__CONFIG__.userInfoKey,(res)=>{
        userInfo.value=null
        __CONFIG__.userInfoObj=null
      })
    }
    function validUserInfo(userInfo){
      console.log('userInfo',userInfo)
      return userInfo && userInfo.toString().startsWith("{")
        &&userInfo.toString().endsWith("}")
    }
    return {
      loginClick,
      userInfo,
      userInfoObj,
      logoutClick,
      ic_header_login_normal,
      ic_header_login_focused,
    }
  }
})
</script>

<style scoped>

</style>
